<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>竞赛首页</title>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/base.css">
    <style>
		.rotation-img{
			width: 100%;
			height: 50vw;
			background-image: url(../../image/course_placehoder.png);
			background-size: 100% 100%;
			display: inherit;
		}
		.base_left_item{
			position: fixed;
			top: 22px;
			left: 0;
			z-index: 10;
		}
		.mui-slider-indicator .mui-indicator{
			background-color: #e6e3e3;
		}
		.mui-slider-indicator .mui-active.mui-indicator{
			background-color: #ffffff;
		}
		
		
		.train-top-image{
			width: 100%;
			min-height: 190px;
			background-image: url(../../image/course_placehoder.png);
			    border-radius: 5px;
    overflow: hidden;
		}
		.train-image{
			width: 40px;
			height: 40px;
			float: right;
			background-image: url(../../image/course_placehoder.png);
		}
		
		.train-cell{
			padding: 10px 10px;
		}
		.sub-div{
			vertical-align:middle;
			display:table-cell;
		}
		.father-div{
			display:table;
			height: 40px;
		}
		.train-cell-content-div .train-top-title{
			/*top: 172px;*/
			bottom: 37px;
		}
		.train-top-title{
			     position: absolute;
		    /* top: 142px; */
		    bottom: 14px;
		    left: 10px;
		    font-size: 14px;
		    color: white;
		    padding: 6px 0px;
		    line-height: 1.2em;
		    background-color: rgba(0,0,0,0.5);
		    /* text-align: center; */
		    width: calc(100% - 20px);
		    overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;
		    border-bottom-left-radius: 5px;
		    border-bottom-right-radius: 5px;
		    padding-left: 6px;
		    padding-right: 6px;
		}
		.course-top-title{
			padding: 20px;
			padding-bottom: 10px;
			line-height: 1em;
			text-align: center;
			margin: 0;
		}
		.dian-tag{
			text-decoration: underline;
		}
		.gary-div{
			height: 8px;
			background-color: #f3f5f7;
		}
		.train-cell-top-div{
			height: 30px;
		}
		.train-top-tag{
			font-size: 14px;
			color: #333333;
			height: 20px;
			position: absolute;
		}
		
		
		.train-bottom-right-title{
			max-width: calc(100% - 200px);
			float: right;
		}
	
		.row {
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
		}
		.col {
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			flex: 1;
			position: relative;
			overflow: hidden;
		}
		.indicator-super-div{
			width: 100%;
			height: 2px;
			padding: 0 20%;
			overflow: hidden;
		}
		.indicator {
			height: 2px;
			width: 62%;
			background: #18b4ed;
			position: absolute;
			bottom: 0;
			z-index: 2;
		}
		
		.base_back_icon {
		    height: 30px; 
		    position: absolute;
		    top: 7px;
		    left: 7px;
		    margin-top: 0;
		}
		
	   .train-cell-content-div{
	      border-radius:5px;
			overflow: hidden;
	   }
		
.mui-table-view:after {
 background-color: #fff;
        transform: none;
        height: 0px;
        content: ""
}
    </style>
</head>
<body>
			<div id="main" style="background-color: #f3f5f7;"  >
			<a class="base_left_item" href="#" onclick="backClick()"> <img class="base_back_icon" src="../../image/icon_bgback.png" alt=""> </a>
			<!-- 轮播图 -->
		<div id="train_slider" class="mui-slider rotation-div" >
			<div id="rotation" class="mui-slider-group mui-slider-loop">
				
			</div>
		<div id="noRotation"  >

						<!--<img class="rotation-img" src="../../image/firstNewsTitls2.png">-->
		
			</div>
			<div id="pageControl" class="mui-slider-indicator" >
			
			</div> 
		</div>
			<div id="item1" class="mui-control-content mui-active">
				<ul id="list1" class="mui-table-view" >
				<!--	
					<li class="mui-table-view-cell mui-media train-cell">
						<div class="train-cell-top-div">
							<span class="train-top-tag">进行中比赛</span>
						</div>
						<div class="train-cell-content-div">
							<img class="train-top-image" src="../../image/course_placehoder.png">
							<p class="train-top-title">
								ppt大赛
							</p>
						</div>
						<div class="train-cell-bottom-div">
							<p class="train-bottom-left-title base_dark_grey_shallow base_tag_font">
								报名时间:2017.03.20-2017.05.10
							</p>
						</div>
					</li>
					<div class="gary-div"></div>
					<li class="mui-table-view-cell mui-media train-cell">
						<div class="train-cell-top-div">
							<span class="train-top-tag ">往届比赛</span>
						</div>
						<div>
							<div class="train-cell-content-div">
								<img class="train-top-image" src="../../image/course_placehoder.png">
								<p class="train-top-title">
									学霸赛
								</p>
							</div>
							<div class="train-cell-bottom-div">
								<p class="train-bottom-left-title base_dark_grey_shallow base_tag_font">
									报名时间:2017.03.20-2017.05.10
								</p>
							</div>
						</div>
					</li>
					<li class="mui-table-view-cell mui-media train-cell">
						<div class="train-cell-content-div">
							<img class="train-top-image" src="../../image/course_placehoder.png">
							<p class="train-top-title">
								信息化大赛
							</p>
						</div>
						<div class="train-cell-bottom-div">
							<p class="train-bottom-left-title base_dark_grey_shallow base_tag_font">
								报名时间:2017.03.20-2017.05.10
							</p>
						</div>
					</li>-->
				</ul>
			</div>
			<div class="noSign"   id="noData"  hidden="hidden">
				<img src="../../image/icon_img.png" width="60%">
				<p class="font16 top_15 base_dark_grey" >
					暂无数据
				</p>
			</div>
			<div class="loadFailure"  id="noNet" hidden="hidden">
				<img src="../../image/icon_img01.png" width="60%">
				<p class="" >
					数据加载失败
				</p>
				<p>
					请检查您的网络
				</p>
				<button type="button" class="mui-btn mui-btn-outlined" onclick="loadData()">
					重新加载
				</button>
			</div>

</body>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/MD5.js"></script>
<script type="text/javascript" src="../../script/requestTool.js"></script>
<script type="text/javascript" src="../../script/mui.min.js"></script>
<script type="text/javascript">
	var rotationArr = new Array();//轮播图数据
	var ingArr =new Array();//进行活动数据
	var passArr =new Array();//结束活动、数据
	apiready = function(){
	 	SendBehaviorTrajectoriesNotifi1(0, '竞赛首页', '168',api.pageParam.sourceurl, api.pageParam.sourcetitle, window.location.pathname,  document.title);
		loadData();
	};
	function loadData(){
	 	showProgress();
	 	var params = {
				uid : $api.getStorage('cfnetppuid'),  
				jid :  $api.getStorage('cfnetppjxid')
			};
			cfnetppPOST(url_competitionindex, params, true, function(data, status) {
				api.hideProgress();
//				 alert("教师端轮播"+JSON.stringify(data))
				if (status == 'success') {
					if (data.code == 200) {
						$('#main').show();
						var list = data.data;
                       	rotationArr=list.lun;
                       	setupRotationData();
                       	ingArr = list.ing;
                       	passArr = list.past;
					   	sethtmls(ingArr,passArr,passArr.length);
					} else {
						$('#main').hide();
						$('#noData').show();
						$('#noNet').hide();
					}
				} else {
					$('#main').hide();
					$('#noData').hide();
					$('#noNet').show();
				}
			});
	  
	}
 	//设置轮播图数据
	function setupRotationData(){
		if (rotationArr.length == 1) {
			var rotationHtml = '';
			rotationHtml = noRotationHtmlString(0, rotationArr[0]);
			$('#noRotation').html(rotationHtml);
			$('#noRotation').show();
			$('#rotation').hide();
		}else{
			var rotationHtml = '';
			//额外增加的一个节点(循环轮播：第一个节点是最后一张轮播)
			var lastIndex = rotationArr.length - 1;
			var rotationLastData = rotationArr[lastIndex];
			rotationHtml += firstLastImgHtml(lastIndex, rotationLastData);
			//遍历数组
			for (var i = 0; i < rotationArr.length; i++) {
				var rotationData = rotationArr[i];
				rotationHtml += rotationHtmlString(i, rotationData);
			}
			//额外增加的一个节点(循环轮播：最后一个节点是第一张轮播)
			var firstIndex = 0;
			var rotationFirstData = rotationArr[firstIndex];
			rotationHtml += firstLastImgHtml(firstIndex, rotationFirstData);
			//设置轮播图代码
			$('#rotation').html(rotationHtml);
			//设置page Control
			$('#pageControl').html(pageControlHtml(rotationArr.length));
			//设置自动轮播
			setupAutoRotation();
			$('#noRotation').hide();
			$('#rotation').show();
		}
		//设置轮播图点击事件
		setupRotationCellClick();
	}
	function setupAutoRotation(){
		var slider = mui("#train_slider");
		slider.slider({
			interval: 3000
		});
	}
	//分页html
	function pageControlHtml(count){
		var pageControl = '';
		pageControl += '<div class="mui-indicator mui-active"></div>';
		for (var i = 1; i < count; i++) {
			pageControl += '<div class="mui-indicator"></div>';
		}
		return pageControl;
	}
	//轮播图首尾
	function firstLastImgHtml(index, data){
		return '<div index="'+index+'" class="rotation-cell mui-slider-item mui-slider-item-duplicate">'+
					'<a href="#">'+
						'<img class="rotation-img" src="'+data.image+'">'+
					'</a>'+
				'</div>';
	}
	//轮播图
	function rotationHtmlString(index, data){
		return '<div index="'+index+'" class="rotation-cell mui-slider-item">'+
					'<a href="#">'+
						'<img class="rotation-img" src="'+data.image+'">'+
					'</a>'+
				'</div>';
	}
	//不轮播的cell
	function noRotationHtmlString(index, data){
		return '<div index="'+index+'" class="rotation-cell">'+
						'<img class="rotation-img" src="'+data.image+'">'+
				'</div>';
	}
	function setupRotationCellClick() {
		$('.rotation-cell').unbind('click');
		$('.rotation-cell').click(function(event) {
			SendBehaviorTrajectoriesNotifi1(1, '竞赛首页', '168',api.pageParam.sourceurl, api.pageParam.sourcetitle, window.location.pathname,  document.title);
			if (api.connectionType == "none") {
				api.toast({
					msg : '网络异常，请检查网络！'
				});
				return;
			}
			var index = $(this).attr('index');
			var rotationData = rotationArr[parseInt(index)];
			var url1 = rotationData.detail;
			if (url1 != '' && url1 != null && url1 != undefined) {
				if (url1.indexOf("http") == -1) {//包含
					return;
				}
				var pageParam =  {
					url: isfreelogin(rotationData.islogin,url1),
					sourceurl : window.location.pathname,
				    sourcetitle : document.title,
				    ctitle:'轮播图详情页',
				    shareurl :url1,
					shareType:rotationData.shareType,
					thumb:rotationData.thumb,
					shareimg:rotationData.shareimg
				}
				api.openWin({useWKWebView:true,
					name : 'indexLunDetailsWindow',
					url : '../HomePage/indexLunDetailsWindow.html',
					pageParam : pageParam
				});
			}else{
				api.openWin({useWKWebView:true,
					name : 'compentition_introduce',
					url : 'compentition_introduce.html'
				});
			}

		});
	}
	function sethtmls(statrdata,datas,len){
		var chtml = '';
		if(statrdata.length>0){
	    	var strshtmls='';
	     	for(var i=0;i<statrdata.length;i++){
				var strhtm= '<div class="train-cell-content-div" onclick=openhd('+0+","+i+')>'+
					'<img class="train-top-image"  src="'+statrdata[i].image+'">'+
					'<p class="train-top-title">'+
						statrdata[i].cname+
					'</p>'+
				'</div>'+
				'<div class="train-cell-bottom-div">'+
					'<p class="train-bottom-left-title base_dark_grey_shallow base_tag_font">活动时间:'+
						getCurrentDay(statrdata[i].starttime)+"~"+getCurrentDay(statrdata[i].endtime)+
					'</p>'+
				'</div>';
				strshtmls= strshtmls+strhtm;
			}
	   		chtml = '<li class=" mui-media train-cell"  style="position: relative;">'+
						'<div class="train-cell-top-div">'+
							'<span class="train-top-tag">进行中比赛</span>'+
						'</div>'+strshtmls+
					'</li>';
		}
	  	for(var i = 0;i<len;i++){
	   		var data = datas[i];
	   		var htmls ='';
		  	if(i==0){
		   		htmls='<div class="gary-div"></div>'+
					'<li class=" mui-media train-cell"  style="position: relative;"onclick=openhd('+1+","+0+')>'+
						'<div class="train-cell-top-div">'+
							'<span class="train-top-tag">往届比赛</span>'+
						'</div>'+
						'<div class="train-cell-content-div">'+
							'<img class="train-top-image"  src="'+data.image+'">'+
							'<p class="train-top-title">'+
							data.cname+
							'</p>'+
						'</div>'+
						'<div class="train-cell-bottom-div">'+
							'<p class="train-bottom-left-title base_dark_grey_shallow base_tag_font">活动时间:'+
								getCurrentDay(data.starttime)+"~"+getCurrentDay(data.endtime)+
							'</p>'+
						'</div>'+
					'</li>';
		   	}else{
			 	htmls='<li class=" mui-media train-cell" style="position: relative;"onclick=openhd('+1+","+i+')>'+
							'<div class="train-cell-content-div">'+
								'<img class="train-top-image"  src="'+data.image+'">'+
								'<p class="train-top-title">'+
									data.cname+
								'</p>'+
							'</div>'+
							'<div class="train-cell-bottom-div">'+
								'<p class="train-bottom-left-title base_dark_grey_shallow base_tag_font">活动时间：'+
									getCurrentDay(data.starttime)+"~"+getCurrentDay(data.endtime)+
								'</p>'+
							'</div>'+
						'</li>';	
		   	}
	    	chtml = chtml + htmls;
	   	}
	  	$("#list1").html(chtml);
	}
	function openhd(type, i) {
		SendBehaviorTrajectoriesNotifi1(1, '竞赛首页', '168',api.pageParam.sourceurl, api.pageParam.sourcetitle, window.location.pathname,  document.title);
		var currentCompetition = ingArr[i];
		if (type == 0) {
			var pageParam = {
				url : isfreelogin(currentCompetition.islogin, currentCompetition.detail),
				sourceurl : window.location.pathname,
				sourcetitle : document.title,
				ctitle : currentCompetition.cname,
				title : currentCompetition.cname,
				shareurl :currentCompetition.detail,
				shareType:currentCompetition.shareType,
				thumb:currentCompetition.thumb,
				shareimg:currentCompetition.shareimg
			}
			api.openWin({useWKWebView:true,
				name : 'indexLunDetailsWindow',
				url : '../HomePage/indexLunDetailsWindow.html',
				pageParam : pageParam
			});
		} else {
		       var name = passArr[i].cname;
			if (name.indexOf("ppt")!=-1) {//ppt大赛
			   	var pageParam = {
					sourceurl : window.location.pathname,
					sourcetitle : document.title
				}
				api.openWin({useWKWebView:true,
					name : 'fanal',
					url : 'fanal.html',
					pageParam : pageParam
				});
				return;
			}
//			alert(currentCompetition.detail);
			var pageParam = {
				url : isfreelogin(passArr[i].islogin, passArr[i].detail),
				sourceurl : window.location.pathname,
				sourcetitle : document.title,
				ctitle : passArr[i].cname,
				title : passArr[i].cname,
				shareurl :passArr[i].detail,
				shareType:passArr[i].shareType,
				thumb:passArr[i].thumb,
				shareimg:passArr[i].shareimg
			};
			api.openWin({useWKWebView:true,
				name : 'indexLunDetailsWindow',
				url : '../HomePage/indexLunDetailsWindow.html',
				pageParam : pageParam
			});
		}
	}
</script>
</html>